import 'package:flutter/material.dart';

main() =>
    runApp(MaterialApp(debugShowCheckedModeBanner: false, home: HomePage()));

List data = [
  {
    'name': '羚羊峡谷',
    'image': 'https://i1.bvimg.com/688304/6443523a2224eccd.jpg',
    'description': '多年来，羚羊峡谷已经成为摄影师、游客和世界各地游客最喜爱的聚集地。',
    'date': 'Mar 20, 2019',
    'rating': '4.7',
    'cost': '\$40.00'
  },
  {
    'name': '马尔代夫',
    'image': 'http://i1.bvimg.com/688304/d52293383b73bf40.jpg',
    'description':
        '马尔代夫是世界上最大的珊瑚岛国，也是亚洲领土面积最小的国家（陆地面积仅及印度的万分之一），但靠着旅游业，不到50万国民过成了“南亚首富”，人均GDP比中国还略高点。',
    'date': 'Mar 24, 2019',
    'rating': '4,83',
    'cost': '\$50.00'
  },
  {
    'name': '堪察加半岛',
    'image': 'https://i1.bvimg.com/688304/0446a6aeeb69c66f.jpg',
    'description':
        '堪察加半岛（俄语：Полуостров Камчатка，Poluostrov Kamchatka），是位于俄罗斯远东联邦管区、东北亚的一个半岛，由堪察加边疆区管辖，其首府彼得罗巴甫洛夫斯克位于半岛的东南部。堪察加半岛长1,250公里，面积472,300平方公里。半岛西滨鄂霍次克海，东临白令海及北太平洋。半岛与太平洋之间的千岛海沟深达10,500米。堪察加半岛的堪察加火山群为俄罗斯的世界遗产。  ',
    'date': 'Apr 18, 2019',
    'rating': '4,7',
    'cost': '\$30.00'
  },
];

var profileImage = 'https://i1.bvimg.com/688304/737dedb4fda451a7.jpg';

class HomePage extends StatelessWidget {
  @override
  build(context) => Scaffold(
        body: ListView(
          children: [
            SizedBox(height: 16.0),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 24.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        '搜索想去的地方',
                        style: TextStyle(color: Colors.black54),
                      ),
                      Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text('目的地',
                              style: TextStyle(
                                  fontWeight: FontWeight.bold, fontSize: 22.0)),
                          Icon(
                            Icons.arrow_drop_down,
                            color: Colors.black54,
                          )
                        ],
                      )
                    ],
                  ),
                  CircleAvatar(
                    backgroundImage: NetworkImage(profileImage),
                  )
                ],
              ),
            ),
            SizedBox(height: 16.0),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 24.0),
              child: Container(
                height: 200.0,
                child: ListView(
                  scrollDirection: Axis.horizontal,
                  children: data.map((x) {
                    return Padding(
                      padding: EdgeInsets.all(8.0),
                      child: GestureDetector(
                        onTap: () {
                          Navigator.push(
                              context,
                              MaterialPageRoute(
                                  builder: (context) => SecondScreen(x)));
                        },
                        child: Hero(
                          tag: x['image'],
                          child: Container(
                            height: 200.0,
                            width: 140.0,
                            decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(16.0),
                                image: DecorationImage(
                                    colorFilter: ColorFilter.mode(
                                        Colors.black26, BlendMode.darken),
                                    image: NetworkImage(x['image']),
                                    fit: BoxFit.cover)),
                            child: Padding(
                              padding: EdgeInsets.all(14.0),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                    children: [
                                      Container(),
                                      Text(
                                        '4,7',
                                        style: TextStyle(
                                            color: Colors.white,
                                            fontSize: 16.0),
                                      )
                                    ],
                                  ),
                                  Spacer(),
                                  Text(
                                    x['name'],
                                    style: TextStyle(
                                        color: Colors.white, fontSize: 16.0),
                                  ),
                                  Text(
                                    x['date'],
                                    style: TextStyle(
                                      color: Colors.white54,
                                      fontSize: 12.0,
                                    ),
                                  ),
                                  SizedBox(height: 8.0)
                                ],
                              ),
                            ),
                          ),
                        ),
                      ),
                    );
                  }).toList(),
                ),
              ),
            ),
            SizedBox(height: 8.0),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 32.0),
              child: Text(
                '浏览所有 -',
                style: TextStyle(color: Colors.red),
              ),
            ),
            SizedBox(height: 32.0),
            Padding(
              padding: EdgeInsets.only(left: 32.0),
              child: Container(
                height: 40.0,
                child: ListView(
                  scrollDirection: Axis.horizontal,
                  children: [
                    Padding(
                      padding: EdgeInsets.only(right: 16.0),
                      child: Text(
                        '热门',
                        style: TextStyle(
                            fontSize: 22.0, fontWeight: FontWeight.bold),
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.only(right: 16.0),
                      child: Text('最新', style: TextStyle(fontSize: 22.0)),
                    ),
                    Padding(
                      padding: EdgeInsets.only(right: 16.0),
                      child: Text('推荐', style: TextStyle(fontSize: 22.0)),
                    ),
                    Padding(
                      padding: EdgeInsets.only(right: 16.0),
                      child: Text('收藏', style: TextStyle(fontSize: 22.0)),
                    ),
                  ],
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.only(left: 32.0),
              child: Container(
                height: 2.0,
                child: Stack(
                  children: [
                    Container(
                      color: Colors.black12,
                      height: 2.0,
                      width: double.infinity,
                    ),
                    Container(
                      color: Colors.red,
                      height: 2.0,
                      width: 80.0,
                    )
                  ],
                ),
              ),
            ),
            SizedBox(
              height: 16.0,
            ),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 32.0),
              child: Container(
                height: 256.0,
                width: double.infinity,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Column(
                      children: [
                        itemCard(data[0]['image'], data[0]['name'],
                            data[0]['date'], 120.0, context),
                        SizedBox(height: 16.0),
                        itemCard(data[1]['image'], data[1]['name'],
                            data[1]['date'], 120.0, context),
                      ],
                    ),
                    itemCard(data[2]['image'], data[2]['name'], data[2]['date'],
                        256.0, context),
                  ],
                ),
              ),
            )
          ],
        ),
      );

  itemCard(image, title, date, height, context) => Container(
        height: height,
        width: MediaQuery.of(context).size.width / 2 - 42,
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(16.0),
            image: DecorationImage(
                image: NetworkImage(image),
                fit: BoxFit.cover,
                colorFilter:
                    ColorFilter.mode(Colors.black26, BlendMode.darken))),
        child: Padding(
          padding: EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Spacer(),
              Text(
                title,
                style: TextStyle(color: Colors.white),
              ),
              SizedBox(
                height: 4.0,
              ),
              Text(
                date,
                style: TextStyle(color: Colors.white54),
              ),
            ],
          ),
        ),
      );
}

class SecondScreen extends StatelessWidget {
  SecondScreen(this.data);
  final data;
  @override
  build(context) => Scaffold(
        body: Container(
            child: Stack(
          fit: StackFit.expand,
          children: [
            Hero(
              tag: data['image'],
              child: Image.network(
                data['image'],
                fit: BoxFit.cover,
                colorBlendMode: BlendMode.darken,
                color: Colors.black54,
              ),
            ),
            Container(
              height: MediaQuery.of(context).size.height,
              width: MediaQuery.of(context).size.width,
              child: Padding(
                padding: EdgeInsets.symmetric(horizontal: 32.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    SizedBox(height: 32.0),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        IconButton(
                          onPressed: () {
                            Navigator.pop(context);
                          },
                          icon: Icon(Icons.arrow_back),
                          color: Colors.white,
                        ),
                        Text(
                          '02/10',
                          style: TextStyle(color: Colors.white, fontSize: 24.0),
                        ),
                      ],
                    ),
                    Spacer(),
                    Container(
                      width: 240.0,
                      child: Text(
                        data['name'],
                        style: TextStyle(
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                            letterSpacing: 1.1,
                            fontSize: 42.0),
                      ),
                    ),
                    SizedBox(height: 16.0),
                    Row(
                      children: [
                        Icon(
                          Icons.star,
                          color: Colors.yellow,
                          size: 14.0,
                        ),
                        SizedBox(
                          width: 4.0,
                        ),
                        Icon(
                          Icons.star,
                          color: Colors.yellow,
                          size: 14.0,
                        ),
                        SizedBox(
                          width: 4.0,
                        ),
                        Icon(
                          Icons.star,
                          color: Colors.yellow,
                          size: 14.0,
                        ),
                        SizedBox(
                          width: 4.0,
                        ),
                        Icon(
                          Icons.star,
                          color: Colors.yellow,
                          size: 14.0,
                        ),
                        SizedBox(
                          width: 4.0,
                        ),
                        Icon(
                          Icons.star,
                          color: Colors.yellow,
                          size: 14.0,
                        ),
                        SizedBox(width: 8.0),
                        Text(
                          '4,7',
                          style: TextStyle(color: Colors.white),
                        ),
                        SizedBox(width: 4.0),
                        Text(
                          '(1072)',
                          style: TextStyle(color: Colors.white54),
                        ),
                      ],
                    ),
                    SizedBox(height: 16.0),
                    Container(
                      child: Text(
                        data['description'],
                        style: TextStyle(color: Colors.white54, height: 1.4),
                      ),
                    ),
                    SizedBox(height: 16.0),
                    Text(
                      '阅读更多',
                      style: TextStyle(color: Colors.white, fontSize: 18.0),
                    ),
                    SizedBox(height: 16.0),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Container(
                            child: Row(
                          children: [
                            Container(
                              width: 4.0,
                              height: 4.0,
                              decoration: BoxDecoration(
                                  color: Colors.white54,
                                  borderRadius: BorderRadius.circular(50.0)),
                            ),
                            SizedBox(width: 4.0),
                            Container(
                              width: 18.0,
                              height: 2.0,
                              color: Colors.white,
                            ),
                            SizedBox(width: 4.0),
                            Container(
                              width: 4.0,
                              height: 4.0,
                              decoration: BoxDecoration(
                                  color: Colors.white54,
                                  borderRadius: BorderRadius.circular(50.0)),
                            ),
                            SizedBox(width: 4.0),
                            Container(
                              width: 4.0,
                              height: 4.0,
                              decoration: BoxDecoration(
                                  color: Colors.white54,
                                  borderRadius: BorderRadius.circular(50.0)),
                            ),
                          ],
                        )),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.end,
                          children: [
                            Text(
                              '\$40.00',
                              style: TextStyle(
                                  color: Colors.white, fontSize: 28.0),
                            ),
                            Text(
                              '星期五, 3月 2019',
                              style: TextStyle(
                                  color: Colors.white54, fontSize: 14.0),
                            ),
                          ],
                        )
                      ],
                    ),
                    SizedBox(
                      height: 32.0,
                    )
                  ],
                ),
              ),
            )
          ],
        )),
      );
}
